<template>
  <div>
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          unique-opened
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :default-openeds="openeds"
        >
          <template v-for="i in menuData">
            <router-link
              v-if="i.url != null"
              :key="i.id"
              :to="i.url"
              class="router-link"
            >
              <el-menu-item :index="i.url" :key="i.id">
                <i :class="i.icon"></i>
                <span slot="title">{{ i.name }}</span>
              </el-menu-item>
            </router-link>
            <el-submenu v-else :index="i.id" :key="i.id">
              <template slot="title">
                <i :class="i.icon"></i>
                <span slot="title">{{ i.name }}</span>
              </template>
              <el-menu-item-group>
                <router-link
                  v-for="children in i.childrens"
                  :key="children.id"
                  :to="children.url"
                  class="router-link"
                >
                  <el-menu-item :index="children.url">
                    <i :class="children.icon"></i>
                    <span slot="title">{{ children.name }}</span>
                  </el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserMenuList } from "@/services/menu";
export default {
  name: "Menu",

  data() {
    return {
      openeds: [`${this.$route.path}`], //`${this.$route.path}`
      menuData: [
        // {
        //       "id": "1684504768690450434",
        //       "createTime": "2023-07-27 18:03:28",
        //       "name": "设置",
        //       "url": null,
        //       "icon": "el-icon-setting",
        //       "sort": 1,
        //       "childrens": [
        //           {
        //               "id": "1684505180373970946",
        //               "createTime": "2023-07-27 18:05:06",
        //               "name": "菜单管理",
        //               "url": "/home/menu",
        //               "icon": "el-icon-menu",
        //               "sort": 1
        //           },
        //           {
        //               "id": "1684505321470357506",
        //               "createTime": "2023-07-27 18:05:40",
        //               "name": "角色管理",
        //               "url": "/home/role",
        //               "icon": "el-icon-user",
        //               "sort": 2
        //           }
        //       ]
        //   }
      ],
    };
  },
  mounted() {
    this.getUserMenuList();
  },

  methods: {
    handleOpen(key, keyPath) {
      this.openeds = [key];
    },
    handleClose(key, keyPath) {
      this.openeds = [];
    },
    getUserMenuList() {
      getUserMenuList()
        .then((res) => {
          this.menuData = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100vh;
}
.router-link {
  text-decoration: none; /* 去掉下划线 */
  color: #333; /* 设置链接文字颜色 */
  /* 添加其他样式，如hover效果等 */
}
</style>